<template>
	<div>
		<el-form :inline="true">
			<el-form-item label="">
				<el-input v-model="searchMap.log_id" placeholder="" />
			</el-form-item>
			<el-button type="primary" @click="fetchData()">查询</el-button>
		</el-form>

		<!--表格组件-->
		<el-table :data="list" style="width: 100%">
			<!--prop 后端返回的json数据的字段名-->
			<el-table-column prop="log_id" label="日志序号">
			</el-table-column>
			<el-table-column prop="userName" label="操作者">
				<!-- <el-table-column label="操作者">
				<template slot-scope="scope">
					{{ scope.row.userName }}
				</template> -->
			</el-table-column>
			<el-table-column prop="log_message" label="操作内容">
			</el-table-column>
			<el-table-column prop="log_time" label="记录时间">
			</el-table-column>
		</el-table>
		<!-- <el-button type="primary" @click="test()">测试</el-button> -->
		<!--分页-->
		<el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 100]" :page-size="10"
			layout="total, sizes, prev, pager, next, jumper" :total="count">
		</el-pagination>
		<el-dialog title="编辑" :visible.sync="dialogFormVisible">
			<el-form label-width="80px">
				<el-form-item label="操作账户id">
					<el-input v-model="pojo.user_id" />
				</el-form-item>
				<el-form-item label="操作内容，格式为用户+操作，如张三对A表修改">
					<el-input v-model="pojo.log_message" />
				</el-form-item>
				<el-form-item label="日志记录时间">
					<el-input v-model="pojo.log_time" />
				</el-form-item>
				<el-button type="primary" @click="handleSave()">保存</el-button>
				<el-button @click="dialogFormVisible = false">关闭</el-button>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import LogsApi from "@/api/apiLiu/Logs_request"
import { _getUserInfo } from '../../api/user'
export default {
	data() {
		return {
			list: [],
			searchMap: {
				log_id: null,
				user_id: null,
				log_message: null,
				log_time: null,
				pageNum: 1,
				pageSize: 7,
			},
			count: 20,
			pojo: {
				log_id: null,
				user_id: null,
				log_message: null,
				log_time: null,

			},
			dialogFormVisible: false,
			dialogFormVisibleTwo: false,
			id: '',
		}
	},
	created() {
		//在创建vue实例后触发初始化钩子函数
		this.fetchData();
	},
	methods: {
		// test(){
		// 	console.log(this.list);
		// },
		fetchData() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			LogsApi.selectList(this.searchMap).then(response => {
				// this.list.forEach(element => {
				// 	_getUserInfo(element.user_id).then(res => {
				// 		// console.log(res);
				// 		element.userName = res.data.userName;
				// 	})
				// });
				
				//赋值
				this.count = response.data.count;

				// 使用 Promise.all 等待所有请求完成
				const promises = response.data.data.map(item => {
					return _getUserInfo(item.user_id).then(res => {
						item.userName = res.data.userName;
					});
				});

				Promise.all(promises).then(() => {
					// 等待所有用户名赋值完成后再更新 list 并渲染表格
					this.list = response.data.data;
				});
				console.log(this.list);
			})
		},
		//当分页大小产生变化的时候调用该方法
		sizeData(size) {
			this.searchMap.pageSize = size
			this.fetchData()
		},
		pageData(page) {
			this.searchMap.pageNum = page
			this.fetchData()
		},
		//新增和修改使用同一个函数打开弹窗，区别是新增没有id
		handleEdit(id) {
			this.id = id
			//打开弹窗
			this.dialogFormVisible = true
			if (id !== '') {
				//根据id查询数据绑定到模型上面
				LogsApi.selectByLog_id(id).then(reponse => {
					this.pojo = reponse.data.data;
				})
			} else {
				this.pojo = {
					log_id: null,
					user_id: null,
					log_message: null,
					log_time: null,
				} //清空数据
			}
		},
		//新增和修改保存数据的方法
		handleSave() {
			if (this.id === null || this.id === '') {
				LogsApi.insert(this.pojo).then(reponse => {
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false
				})
			} else {
				LogsApi.insertOrUpdate(this.pojo).then(reponse => {
					//新增或者修改成功
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false

				})
			}
		},
		handleDelete(id) {
			this.$confirm('您确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				LogsApi.deleteByLog_id(id).then(reponse => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.fetchData()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	}
}

</script>
